<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户管理</title>
<link href="../../style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<style>
.user_ado{
margin-left:372px;
margin-top:20px;
}
.add_user{
position:absolut;
left:15px;
}
#pop{
height:220px;
}
#submit{
margin-right:10px;
}
td{
text-align:center;
}
.w136{
  min-width:100px;
  }

.w150{
 min-width:150px;
}
.lv{
display:none;
}
</style>
</head>
	<body class="a_height">
	  <form name="createForm"  method="get" action="showUser">
    <!--right-->
    <div id="right" class="gray_border">
    	<div class="nav"><i class="total_bg"></i>当前位置：<span><a href="#">用户管理</a></span><span><a href="javascript:void(0)">&gt;</a></span><span><a href="#">用户管理</a></span></div>
        <div class="right_content">
            <div class="add_user total_bg" id="creBtn">创建用户</div>
          
            <table class="content_table">
            	<tr><th>用户名</th><th>用户姓名</th><th>性别</th><th>部门</th><th>联系电话</th><th>电子邮件</th><th class="w150">操作</th></tr>
             	<c:forEach items="${list}" var="v">
						<tr class="use_info">
						    <td class="_hideId" style="display:none">${v.id}</td>
							<td>${v.username}</td>
							<td>${v.name}</td>
							<td>${v.sex}</td>
							<td>${v.dept}</td>
							<td>${v.tel}</td>
							<td>${v.email}</td>
							<td class="lv">${v.lv}</td>
							<td style="text-align:center"><span style="color:blue;cursor:pointer;" onclick="update(this)"><i></i>修改</span><span style="color:red;margin-left:20px;" onclick="del(this)" class="delete"><i class="total_bg"></i><span class="op">删除</span></span></td>
						</tr>
					</c:forEach>
            </table>
         
        </div>
        <div style="display:none"><p >${pageCount}</p></div>
        <div class="pagebar">
        	<ul>
        	   
            	<li class="pre"><a href="showUser!selectUserAllInfo?page=${currentPage-1}"><i class="total_bg"></i>上一页</a></li>
                
                 <li><span style="color:red">${currentPage}</span></li>
                
                <li class="next"><a href="showUser!selectUserAllInfo?page=${currentPage+1}">下一页<i class="total_bg"></i></a></li>
                <li class="end"><a href="showUser!selectUserAllInfo?page=${pageCount}">末页<i class="total_bg"></i></a></li>
                <li class="num_jump">
                	<i class="total_bg"></i>
                    <input type="text" class="num" name="num" />
                    <span class="numjump"></span>
                </li>
            </ul>
        </div>
        
        <!--pop-->
    <div id="pop" class="nodis">
    	<div class="pop_nav" >创建用户<span class="pop_close">×</span></div>
        <div class="pop_content">
        	<table class="pop_table">
                <tr style="display:none"><td><input id="userId" type="text" name="id" value=""/></td></tr>
            	<tr><td class="pop_table_tit" >用户名</td><td><input id="name" type="text" value="" name="username"/></td><td class="pop_table_tit">用户姓名</td><td><input id="name_c" type="text" value="" name="name"/></td></tr>
                <tr class="no_bg"><td class="pop_table_tit" >性别</td><td><select id="sex" name="sex">
                        	<option value="男" selected="selected">男</option>
                            <option value="女">女</option>
                        </select></td>
                        <td class="pop_table_tit">部门</td><td><input id="dept" type="text" value="" name="dept" /></td></tr>
                <tr><td class="pop_table_tit">联系电话</td><td><input id="tel" type="text" value="" name="tel"/></td><td class="pop_table_tit">电子邮件</td><td><input id="email" type="text" value="" name="email"/></td></tr>
            </table>
            <div class="user_ado"><span class="total_bg do_submit" id="submit"/>确定</span></td><td colspan="2"><span id="calBtn" class="total_bg cancel">取消</span></div>	
        </div>
    </div>
    


    </div>
    </form>
    <button onclick="submit()">submit</button>
    <script type="text/javascript">
function submit(){
	document.forms[0].submit();
}
$(document).ready(function(){
	
	$(".content_table th").addClass("w136");
	$(".content_table tr:even").css("background-color","#f1f6f9");
	$("#pop input").val("");
	isOC();
	//创建用户弹出窗口的操作
    $("#creBtn").click(function(){
    	
    	$("#pop").show();
    });
    $("#pop .pop_close").click(function(){
    	
    	$("#pop").hide();
    });
    $("#pop #submit").click(function(){

		 document.forms[0].submit();
		 $("#pop").hide();
		 $("#pop input").val("");
	});
    $("#pop #calBtn").click(function(){
		 
		 $("#pop").hide();
	});
    
    //跳转相应的页面
		$(".numjump").click(function(){
			var ll=$(".num").val();
			window.location.href="showUser!selectUserAllInfo?page="+ll;
			
		});	
}); 

//更新用户信息
function update(a){
	$("#pop").show();
	
	$("#pop #userId").val($(a).parent().parent().children(":first").text());  
	$("#pop #name").val($(a).parent().parent().children().eq(1).text());
    $("#pop #name_c").val($(a).parent().parent().children().eq(2).text());
   
    $("#pop #sex").val($(a).parent().parent().children().eq(3).text());
    $("#pop #dept").val($(a).parent().parent().children().eq(4).text());
    $("#pop #tel").val($(a).parent().parent().children().eq(5).text());
    $("#pop #email").val($(a).parent().parent().children().eq(6).text());

}

//删除当前用户
function del(a){
	var delId=$(a).parent().parent().children(":first").text();
	$.ajax({
		type : "POST",
		url : "deleteUser!deleteUser",
		data: {"id":delId},
		success : function(data) {
			setTimeout(500);
			if($(a).parent().children(":last").text()=="开启"){
				$(a).parent().children(":last").text("关闭");
				$(a).parent().children(":last").css("color",'red');
			}else{
				$(a).parent().children(":last").text("开启");
				$(a).parent().children(":last").css("color",'blue');
			}
			
		}
	}); 
	
}
function isOC(){
	var k=0;
	while($(".lv").eq(k).length>0){
		if($(".lv").eq(k).text()==1){
			$(".delete").eq(k).text("关闭");
			$(".delete").eq(k).css("color",'red');
		}else{
			
			$(".delete").eq(k).text("开启");
			$(".delete").eq(k).css("color",'blue');
		}
		k++;
	}
}
var id;
</script>

</body>
</html>